import 'package:bike_ride/common/mvvm/base_page.dart';
import 'package:bike_ride/common/util/account_manager.dart';
import 'package:bike_ride/common/util/hysize_fit.dart';
import 'package:bike_ride/common/util/phone_call.dart';
import 'package:bike_ride/common/widget/bottom_buttons.dart';
import 'package:bike_ride/common/widget/error.dart';
import 'package:bike_ride/common/widget/page_title_widget.dart';
import 'package:bike_ride/common/widget/xb_button.dart';
import 'package:bike_ride/generated/l10n.dart';
import 'package:bike_ride/model/question/model/question_m.dart';
import 'package:bike_ride/model/question/view_model/question_vm.dart';
import 'package:bike_ride/res/style/color_styles.dart';
import 'package:bike_ride/res/style/theme_styles.dart';
import 'package:bike_ride/router/navigator_util.dart';
import 'package:bike_ride/router/routers.dart';
import 'package:flutter/material.dart';

///客服中心
class QuestionView extends BaseStatefulPage<QuestionViewModel> {
  const QuestionView({super.key});

  @override
  QuestionViewState createState() => QuestionViewState();
}

class QuestionViewState
    extends BaseStatefulPageState<QuestionView, QuestionViewModel> {
  int? expandId;

  @override
  void initAttribute() {}

  @override
  void initObserver() {}

  void notifyChange() {
    if (mounted) {
      setState(() {});
    }
  }

  @override
  QuestionViewModel viewBindingViewModel() {
    return QuestionViewModel()..viewState = this;
  }

  @override
  Widget appBuild(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: ColorStyles.color_F3F4F5,
      body: Column(
        children: [
          PageTitleWidget(title: S.current.customerService),
          Padding(
            padding: EdgeInsets.symmetric(
                horizontal: ThemeStyles.pagePaddingHorizontal),
            child: Column(
              children: [
                SizedBox(
                  height: 168.rpx,
                  child: Row(
                    children: [
                      Expanded(
                          child: _buildPicItem(
                              'assets/applet/icon_question_1.png', S.current.feeDesc, () {
                        NavigatorUtil.push(context, Routers.freightView);
                      })),
                      SizedBox(
                        width: 28.rpx,
                      ),
                      Expanded(
                          child: _buildPicItem(
                              'assets/applet/icon_question_2.png', S.current.feedback, () {
                        NavigatorUtil.push(context, Routers.faultReportView);
                      })),
                      SizedBox(
                        width: 28.rpx,
                      ),
                      Expanded(
                          child: _buildPicItem(
                              'assets/applet/icon_question_3.png',
                              S.current.customerOnline,
                              () {})),
                    ],
                  ),
                ),
                SizedBox(
                  height: 20.rpx,
                ),
                _buildContainer1(),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomButtons(
        child: XbButton(
          width: MediaQuery.of(context).size.width - 2 * ThemeStyles.pagePaddingHorizontal,
          onPressed: () {
            PhoneCallUtil.showPhoneCallModalPopup(
                context, AccountManager.brandInfo?.servicePhone);
          },
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.headset_mic_outlined,
                    size: 32.rpx,
                    color: ColorStyles.color_FFFFFF,
                  ),
                  Text(
                    S.current.customerTel,
                    style: TextStyle(
                        color: ColorStyles.color_FFFFFF, fontSize: 32.rpx),
                  )
                ],
              ),
              Text(
                '${S.current.workTime}：08：00-18：00',
                style: TextStyle(
                    color: ColorStyles.color_FFFFFF, fontSize: 24.rpx),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildContainer1() {
    return Container(
      width: MediaQuery.of(context).size.width -
          2 * ThemeStyles.pagePaddingHorizontal,
      padding: EdgeInsets.symmetric(vertical: 20.rpx, horizontal: 32.rpx),
      decoration: BoxDecoration(
        color: ColorStyles.color_FFFFFF,
        borderRadius: BorderRadius.circular(40.rpx),
        boxShadow: [
          BoxShadow(
            color: ColorStyles.color_000000.withOpacity(0.1),
            offset: Offset(0, 4.rpx),
            blurRadius: 4.rpx,
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            S.current.commonQuestion,
            style: TextStyle(fontSize: 28.rpx, fontWeight: FontWeight.bold),
          ),
          ValueListenableBuilder(
              valueListenable: viewModel!.helpList,
              builder: (context, data, _) {
                return data.isEmpty
                    ? Center(
                        child: ErrorInfoWidget(
                          height: MediaQuery.of(context).size.height * 0.4,
                          retry: () => viewModel!.getHelpList(),
                        ),
                      )
                    : Container(
                        constraints: BoxConstraints(
                          maxHeight: 800.rpx,
                        ),
                        child: SingleChildScrollView(
                          child: ListView.separated(
                            padding: EdgeInsets.symmetric(vertical: 10.rpx),
                            itemCount: data.length,
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemBuilder: (context, index) {
                              final model = data[index];
                              return _buildExpandItem(model);
                            },
                            separatorBuilder:
                                (BuildContext context, int index) {
                              return Container(
                                height: 1,
                                color: ColorStyles.color_E5E5E5,
                                margin: EdgeInsets.symmetric(vertical: 10.rpx),
                              );
                            },
                          ),
                        ),
                      );
              })
        ],
      ),
    );
  }

  Widget _buildExpandItem(QuestionM model) {
    final isExpand = expandId == model.id;
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            setState(() {
              if (isExpand) {
                expandId = null;
              } else {
                expandId = model.id;
              }
            });
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                model.question ?? '-',
                style: TextStyle(
                    fontSize: 24.rpx,
                    color: ColorStyles.color_333333,
                    fontWeight: FontWeight.w500),
              ),
              Icon(
                isExpand ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                color: ColorStyles.color_666666,
                size: 36.rpx,
              )
            ],
          ),
        ),
        if (isExpand)
          Padding(
            padding: EdgeInsets.only(left: 10.rpx),
            child: Text(
              model.answer ?? '-',
              style:
                  TextStyle(fontSize: 24.rpx, color: ColorStyles.color_666666),
            ),
          )
      ],
    );
  }

  Widget _buildPicItem(String iconPath, String txt, Function() onPress) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        // padding: EdgeInsets.symmetric(horizontal: 32.rpx, vertical: 16.rpx),
        decoration: BoxDecoration(
          color: ColorStyles.color_FFFFFF,
          borderRadius: BorderRadius.circular(40.rpx),
          boxShadow: [
            BoxShadow(
              color: ColorStyles.color_000000.withOpacity(0.1),
              offset: Offset(0, 4.rpx),
              blurRadius: 4.rpx,
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              iconPath,
              width: 98.rpx,
              height: 98.rpx,
              fit: BoxFit.cover,
            ),
            SizedBox(
              height: 4.rpx,
            ),
            Text(
              txt,
              style:
                  TextStyle(color: ColorStyles.color_666666, fontSize: 24.rpx),
            ),
          ],
        ),
      ),
    );
  }
}
